<template>
	<view class="main">
		<!--头像-->
		
		<view class="form-lst v-box">
            <view class="item-ding poser" @click="checkAddres">
				<view class="dv1">订阅城市</view>
				<view class="dv2 dis-row">
					<label>{{cityStr?cityStr:'请选择城市'}}</label>
					<u-icon size="20" name="arrow-right"></u-icon>
				</view>
			</view>
			
			<view class="item-ding poser" style="border-bottom: none;">
				<view class="dv1">请输入您的工种</view>
				<view class="dv2 dis-row">
					<label>还可以添加<text>{{num}}</text>个工种</label>
				</view>
			</view>
			<view class="item-ding2 dis-row" style="border-bottom: none;" @click="checkNavGongZhong">
				<view class="dv3 dis-row poser">
					<label><u-icon size="20" name="search"></u-icon></label>
					<text>搜索你要找的好活</text>
				</view>
				<view class="dv4 dis-row"><label>+</label>添加</view>
			</view>
			<view class="item-ding poser" style="border-bottom: none;height: 60rpx;" v-if="selectCheckgognzhong.length>0">
				<view class="dv1" style="font-size: 24rpx;color: #424242;">已添加的工种</view>
			</view>
			<view class="item-ding4" v-if="selectCheckgognzhong.length>0">
				<view class="spl dis-row" v-for="(nv,ni) in selectCheckgognzhong" :key="ni" @click="delSelectgz(nv,ni)">
					{{nv.skillName}}<label><u-icon name="close" size="15"></u-icon></label>
				</view>
				
			</view>
			<view class="item-ding poser" style="border-bottom: none;" @click="openTelTime">
				<view class="dv1">订阅通知时间</view>
				<view class="dv2 dis-row">
					<label>{{timeStr?timeStr:'选择通知时间段'}}</label>
					<u-icon size="20" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view style="height: 80rpx;"></view>
			<view class="fnm" @click="sendPost">完成，立即查看好活</view>
			
			
			<u-popup
				:show="telTime"
				:round="10" 
				mode="bottom" 
				:closeable="true" 
				@close="closeTelTime" 
				>
				<view class="telTime">
					<view class="telTimeTitle">在此时间段接收订阅消息</view>
					<view class="list">
						<view v-for="(item,index) in answerTelDate" @click="choiceDate(index)" :key="index" 
						
						:class="{'active':item.curIndex==1}">{{item.name}}</view>
					</view>
					<u-button type="primary" @click="closeTelTimeSure()" customStyle="background:#0575FF; font-size:32rpx;" text="确定"></u-button>
				</view>
			</u-popup>
			<!--全部工种-->
			<pop ref="gongzhong" :direction="direction" :is_close="true" :is_mask="true" :width="100">
				 <view class="con-del dis-clm">
					 <view class="cityName">全部工种</view>
					 <view class="checkgongzhongLList row-box" v-if="selectCheckgognzhong.length>0">
						 <view v-for="(se,sc) in selectCheckgognzhong" :key="sc" class="dis-row" @click="delSelectgz(se,sc)">
							 <text>{{se.skillName}}</text><label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/cc.png"></image></label>
						 </view>
					 </view>
					 <view class="cityList dis-row">
					 	<view class="sheng dis-clm">
					 		<scroll-view scroll-y="true">
					 			<view class="sheng-Lst" v-for="(gzitem,gzindex) in gongzhongList" 
									:key="gzindex" 
									:class="{'shengActive':(gzlevelone==gzindex && isclickgzone == true)}"
									@click="gzTaskLevelone(gzitem,gzindex)">
									{{cutstr(gzitem.skillName,10)}}
								</view>
					 		</scroll-view>
					 	</view>
					 	<view class="leveltwo dis-clm" v-if="gongzhongList[gzlevelone] && gongzhongList[gzlevelone].child">
							<scroll-view scroll-y="true">
								<view class="shi-lst" v-for="(shiItem,shiIndex) in gongzhongList[gzlevelone].child" 
								:key="shiIndex"
								:class="{'shiActive':(gzleveltwo == shiIndex && isclickgztwo == true)}"
								@click="gzTaskLevelTwo(shiItem,shiIndex)"
								style="width: 400rpx;"
								>
									{{shiItem.skillName}}
								</view>
							</scroll-view>
						</view>
				
					 </view>
					 <view class="addres-footer dis-row">
						 <view class="addres-btn" @click="cleanGongZhongIndex">清除</view>
						 <view class="addres-btn" @click="getCheckGongZhong">确定选择</view>
					 </view>
				 </view>
			</pop>
			
			<pop ref="city" :direction="direction" :is_close="true" :is_mask="true" :width="100">
			     <view class="con-del dis-clm" v-if="cityList &&cityList.length>0">
					 <view class="cityName">选择地点</view>
					 <view class="checkgongzhongLList row-box" v-if="selectcity.length>0">
							 <view v-for="(se,sc) in selectcity" :key="sc" class="dis-row" @click="delSelectgz(se,sc)">
								 <text>{{se.name}}</text><label><image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/icon/cc.png"></image></label>
							 </view>
					 </view>
					 <view class="cityList dis-row">
					 	<view class="sheng dis-clm">
					 		<scroll-view scroll-y="true">
					 			<view class="sheng-Lst" v-for="(cityitem,cityindex) in cityList" 
								:key="cityindex" 
								:class="{'shengActive':(si==cityindex && isclickCitysheng == true)}"
								v-if="cityitem.pid==0"
								@click="shengClick(cityitem,cityindex)"
								>{{cutstr(cityitem.name,10)}}</view>
					 		</scroll-view>
					 	</view>
					 	<view class="shi dis-clm" style="width: 400rpx;">
							<scroll-view scroll-y="true">
								<view class="shi-lst" v-for="(shiItem,shiIndex) in cityList[si].childone" 
								:key="shiIndex"
								:class="{'shiActive':(ci == shiIndex && isclickCityshi == true)}"
								@click="shiClick(shiItem,shiIndex)"
								style="width: 400rpx;"
								>
									{{shiItem.name}}
								</view>
							</scroll-view>
						</view>
					 	<!-- <view class="qu dis-clm">
							<scroll-view scroll-y="true">
								<view class="qu-lst" v-for="(quitem,quindex) in cityList[si].childone[ci].child" :key="quindex"
								:class="{'quActive':(qi==quindex && isclickCityqu == true)}"
								@click="quClick(quitem,quindex)">
									{{cutstr(quitem.name,10)}}
								</view>
							</scroll-view>
						</view> -->
					 </view>
					 
					 <view class="addres-footer dis-row">
						 <view class="addres-btn" @click="cleanAddresIndex">清除</view>
						 <view class="addres-btn" @click="getCheckAddress">确定选择</view>
					 </view>
				 </view>
			</pop>
	</view>
</template>

<script>
import Index from "@/common/index-model.js"	
import pop from "@/components/ming-pop/ming-city.vue"
import fun from "@/common/publicFun.js"	
let index = new Index()
let that = null
export default {
	data() {
		return {
			direction:'below',
			telTime: false,
			cityList:[], //省市区 数据列表
			si:0, //省下标
			ci:0, //市下标
			qi:0, //区下标
			isclickCitysheng:false,//省是否被点击
			isclickCityshi:false,//市是否被点击
			isclickCityqu:false,//区是否被点击
			selectcity:[],//选中的城市
			cityStr:'',
			isclickgzone:false,//二级工种 是否被点击
			isclickgztwo:false,//三级工种 是否被点击
			gongzhongList:[], //底部弹窗工种列表
			gzlevelone:0, //二级工种 当前选中的序号
			gzleveltwo:0, //三级工种 当前选中的序号
			selectCheckgognzhong:[],//选中的工种
			answerTelDate:[],
			selecTimeList:[],
			timeStr:'',
			num:3,
			queryType:[],
			cityListB:[],
			timeList:[]
		}
	},
	components:{
		pop
	},
	onLoad() {
	  this.getCityList()
	  this.getQueryType()
	  this.GetanswerTelDate()
	  setTimeout(()=>{
	  	this.getsubscription()
	  },500)
	  
	},
	methods:{
		getsubscription(){
			index.getPublicUserMember({},'/client/individual/find/subscription','get',res=>{
				if(res.data.code == 200 && res.data.success){
					this.cityStr=index.strTrim(res.data.result.citys,',');
					let skillIds=index.strTrim(res.data.result.skillIds,',');
					if(skillIds){
						skillIds=skillIds.split(',');
						skillIds.forEach((item,i)=>{
							const gz = this.queryType.filter(
								(it) => it.id == parseInt(item)
							);
							this.selectCheckgognzhong.push(gz[0]);
						})
					}
					this.num=3-this.selectCheckgognzhong.length;
					
					let cityIds=index.strTrim(res.data.result.cityIds,',');
					if(cityIds){
						cityIds=cityIds.split(',');
						cityIds.forEach((item,i)=>{
							const ci = this.cityListB.filter(
								(it) => it.id == parseInt(item)
							);
							this.selectcity.push(ci[0]);
							
						})
					}
					
					let timeSection=index.strTrim(res.data.result.timeSection,',');
					if(timeSection){
						timeSection=timeSection.split(',');
						timeSection.forEach((item,i)=>{
							const ti = this.timeList.filter(
								(it) => it.id == parseInt(item)
							);
							this.selecTimeList.push(ti[0]);
							this.timeStr=ti[0].name;
						})
					}
				}
			})
		},
		sendPost() {
			if(this.selectcity.length == 0){
				index.show_tips('请选择城市')
				return false
			}
			if(this.selectCheckgognzhong.length == 0){
				index.show_tips('请选择工种')
				return false
			}
			if(this.selecTimeList.length == 0){
				index.show_tips('请选择时间段')
				return false
			}
			let cityids=''
			for(let i=0;i<this.selectcity.length;i++){
				cityids+=this.selectcity[i].id+','
			}
			let typeids=''
			for(let i=0;i<this.selectCheckgognzhong.length;i++){
				typeids+=this.selectCheckgognzhong[i].id+','
			}
			let timeids=''
			for(let i=0;i<this.selecTimeList.length;i++){
				timeids+=this.selecTimeList[i].id+','
			}
			let send={"citys":cityids,"skills":typeids,"time":timeids};
			index.getPublicUserMember(send,'client/individual/subscription/service','post',res=>{
				if(res.data.code == 200 && res.data.success){
					index.show_tips('提交成功')
					setTimeout(()=>{
						index.switch_tab('../../pages/user/index')
					},500)
				}else{
					index.show_tips(res.data.message)
					return false
				}
			})
		},
		choiceDate(i) {
			this.telTime = false;
			this.telTime = true;
			if(i==0){
				if(this.answerTelDate[i].curIndex==1){
					this.answerTelDate[i].curIndex=0;
				}else{
					this.answerTelDate[i].curIndex=1;
					this.answerTelDate.forEach((item,index)=>{
						if(index!=i){
							this.answerTelDate[index].curIndex=0;
						}
					})
				}
			}else{
				if(this.answerTelDate[i].curIndex==1){
					this.answerTelDate[i].curIndex=0;
				}else{
					this.answerTelDate[i].curIndex=1;
					this.answerTelDate[0].curIndex=0;
				}
			}				
			
		},
		closeTelTimeSure() {
			this.selecTimeList = []
			this.timeStr=''
			for(let i=0;i<this.answerTelDate.length;i++){
				if(this.answerTelDate[i].curIndex == 1){
					if(this.selecTimeList.length<2){
						this.selecTimeList.push(this.answerTelDate[i])
					}else{
						index.show_tips('订阅推送时段不能超过2个')
						return false
					}
					
				}
			}
			if(this.selecTimeList.length == 0){
				index.show_tips('请选择时间段')
				return false
			}
			// this.selecTimeList.forEach(item=>{
			// 	this.form.teltime +=item.name+','
			// })
			for(let j=0;j<this.selecTimeList.length;j++){
				if(j==(this.selecTimeList.length-1)){
					this.timeStr +=this.selecTimeList[j].name
				}else{
					this.timeStr +=this.selecTimeList[j].name+','
				}
			}
			this.telTime = false;
		},
		closeTelTime() {
		    this.telTime = false;
			this.answerTelDate.forEach((item,index)=>{
				if(item.curIndex==1){
					this.timeStr=item.name;
				}
			})
		},
		openTelTime() {
		    this.telTime = true;
		},
		//接电话时间
		GetanswerTelDate() {
			index.getPublicUserMember({},'client/public/find/section','get',res=>{
				if(res.data.code == 200 && res.data.success){
					let arr = res.data.result
					this.timeList=arr;
					if(arr.length>0){
						for(let i=0;i<arr.length;i++){
							arr[i].curIndex = 0
						}
						this.answerTelDate = arr
					}
				}
			})
		},
		//跳转到选择工种页面
		checkNavGongZhong() {
			if(this.gongzhongList.length == 0){
				index.show_tips('工种数据异常')
				return false
			}
		   this.$refs.gongzhong.show();
		},
		//点击工种二级类型 切换下标
		gzTaskLevelone(item,gzindex) {
			this.gzlevelone = gzindex
			this.gzleveltwo = 0
			this.isclickgzone = true
			this.isclickgztwo = false
		},
		//切换三级工种 类型 下标
		gzTaskLevelTwo(item,gzindex) {
		  this.isclickgztwo = true
		  if(this.selectCheckgognzhong.length == 0){
			this.selectCheckgognzhong.push(item)
		  }else{
			
			let issure = false
			for(let i=0;i<this.selectCheckgognzhong.length;i++){
				if(this.selectCheckgognzhong[i].id == item.id){
					issure=true
				}
			}
			if(issure == false){
				if(this.selectCheckgognzhong.length<3){
					this.selectCheckgognzhong.push(item)
					this.gzleveltwo = gzindex
				}else{
					index.show_tips('所选工种不能超过3个')
					return false
				}
				
			}
		  }
		},
		//移除选中的工种
		delSelectgz(se,sc) {
			if(this.selectCheckgognzhong.length>0){
				this.selectCheckgognzhong.splice(sc,1)
				//delete this.selectCheckgognzhong[sc]
			}
			this.num=3-this.selectCheckgognzhong.length;
		},
		//清空选中的工种
		cleanGongZhongIndex() {
			this.gzlevelone = 0
			this.gzleveltwo = 0
			this.selectCheckgognzhong = []
			//this.$refs.gongzhong.close()
		},
		//确定选中的工种进行查询
		getCheckGongZhong() {
			if(this.selectCheckgognzhong.length == 0){
				index.show_tips('请先去选择要查询的工种')
				return false
			}
			let one=[],two=[]
			for(let i = 0;i<this.selectCheckgognzhong.length;i++){
				if(this.selectCheckgognzhong[i].slevel == 2){
					one.push(this.selectCheckgognzhong[i].id)
				}
				if(this.selectCheckgognzhong[i].slevel == 3){
					two.push(this.selectCheckgognzhong[i].id)
				}

			}
			this.num=3-this.selectCheckgognzhong.length;
			let sendpost = {
				"level2":one.join(','),
				"level3":one.join(',')
			}
			this.$refs.gongzhong.close()
		},
		//查询工种
		getQueryType() {
			let types= "construction"
			this.Qurylist = []
			index.getPublicMember({},'client/skills/list/'+types,'get',res=>{
				this.queryType=res.data.result;
				if(res.data.success && res.data.code == 200){
					let arr = res.data.result
					let gzarr=[];
					if(arr.length>0){
						for(let i=0;i<arr.length;i++){
							if(arr[i].slevel == 2){
								this.Qurylist.push({name:arr[i].skillName,id:arr[i].id})
								gzarr.push(arr[i]);
							}
						}
						//把三级工种压到二级工种里面
						if(gzarr.length>0){
							for(let j=0;j<gzarr.length;j++){
								gzarr[j].child = []
								for(let m=0;m<arr.length;m++){
									if(arr[m].pid == gzarr[j].id && arr[m].slevel == 3){
										gzarr[j].child.push(arr[m])
									}
								}
							}
						}
						this.gongzhongList = gzarr;
					}else{
						this.gongzhongList=[]
					}
				}else{
					this.Qurylist = []
					this.gongzhongList = []
				}
			})
		},
	    //=========地址
		checkAddres() {
			//this.show = true
			if(uni.getStorageSync('token')){
				this.$refs.city.show()
			}else{
				index.navigate_to('../login/login');
			}
		},
		//按地点查询
		getCheckAddress() {
			let sendpostData = {
				"provinceId":this.cityList[this.si].id,
				"cityId":this.cityList[this.si].childone[this.ci].id
			}
			if(!this.cityList[this.si].id || !this.cityList[this.si].childone[this.ci].id){
				index.show_tips('请认真选择地址')
				return false
			}
			this.cityStr = ''
			if(this.selectcity.length>0){
				for(let i=0;i<this.selectcity.length;i++){
					if(i == this.selectcity.length-1){
						this.cityStr+=this.selectcity[i].name
					}else{
						this.cityStr+=this.selectcity[i].name+','
					}
				}
			}
			this.$refs.city.close();
		},
		//点击省切换
		shengClick(item,rv) {
			this.si = rv 
			this.ci = 0
			this.qi =0
			this.isclickCitysheng = true
			this.isclickCityshi = false 
			this.isclickCityqu = false
		},
		//点击市切换
		shiClick(item,cv) {
			this.isclickCityshi = true
			if(this.selectcity.length == 0){
				this.selectcity.push(item)
			}else{
				let issure = false
				for(let i=0;i<this.selectcity.length;i++){
					if(this.selectcity[i].id == item.id){
						issure=true
					}
				}
				if(issure == false){
					if(this.selectcity.length<3){
						this.selectcity.push(item)
						this.ci = cv
						this.qi = 0
					}else{
						index.show_tips('所选城市不能超过3个')
						return false
					}
					
				}
			}
		},
		quClick(item,qus) {
			this.qi = qus
			this.isclickCityqu = true
		},
		//获取省市区数据列表
		getCityList() {
			index.getPublicUserMember({},'client/public/find/areaList','get',res=>{
				if(res.data.code == 200 && res.data.success){
					let arr=res.data.result
					this.cityListB=arr;
					let provList = []
					if(arr.length>0){
						for(let i=0;i<arr.length;i++){
							if(arr[i].pid==0){
								provList.push(arr[i])
							}
						}
						if(provList.length>0){
							for(let i=0;i<provList.length;i++){
								provList[i].childone = []
								for(let j=0;j<arr.length;j++){
									if(arr[j].pid == provList[i].id){
										provList[i].childone.push(arr[j])
									}
								}
							}
							//三级区
							for(let m=0;m<provList.length;m++){
								if(provList[m].childone.length>0){
									for(let n=0;n<provList[m].childone.length;n++){
										provList[m].childone[n].child=[]
										for(let k=0;k<arr.length;k++){
											if(arr[k].pid == provList[m].childone[n].id){
												provList[m].childone[n].child.push(arr[k])
											}
										}
									}
								}
							}
						}
						this.cityList = provList
					}else{
						if(res.data.code == '401'){
							uni.removeStorageSync('')
						}
						arr=[]
					}
				}
			})
		},
		cutstr(str, len) {
			var str_length = 0;
			var str_len = 0;
			var str_cut = new String();
			str_len = str.length;
			for (var i = 0; i < str_len; i++) {
				var a = str.charAt(i);
				str_length++;
				if (escape(a).length > 4) {
					//中文字符的长度经编码之后大于4  
					str_length++;
				}
				str_cut = str_cut.concat(a);
				if (str_length >= len) {
					str_cut = str_cut.concat("...");
					return str_cut;
				}
			}
			//如果给定字符串小于指定长度，则返回源字符串；  
			if (str_length < len) {
				return str;
			}
		},
	}

}
</script>

<style>
@import url("@/static/css/publics.css");
@import url("@/static/css/mydingyue.css");	
</style>